<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>项目管理</title>
    <link rel="shortcut icon" href="/resource/image/favicon.ico" type="image/x-icon">
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet">
    <link href="/resource/css/bootstrap-icons.css" rel="stylesheet">
    <link href="/resource/css/pm.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0">
            <span class="server-name" id="serverName">Java项目管理</span>
        </h2>
        <button type="button" class="btn btn-primary" id="registerButton" aria-label="注册在线项目">
            <i class="bi bi-plus-circle" aria-hidden="true"></i> 注册在线项目
        </button>
    </div>

    <div id="notificationArea" class="alert alert-dismissible fade" role="alert">
        <span id="notificationMessage"></span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="关闭"></button>
    </div>

    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>项目名</th>
                <th>端口</th>
                <th>PID</th>
                <th>目录</th>
                <th>启动命令</th>
                <th>脚本命令</th>
                <th>项目描述</th>
                <th>状态</th>
                <th>方式</th>
                <th>自启</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="projectList"></tbody>
        </table>
    </div>
</div>

<div id="contextMenu" class="context-menu" style="display: none;" role="menu">
    <button type="button" class="context-menu-item" id="copyContextButton" role="menuitem" tabindex="0">
        复制内容
    </button>
</div>

<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">编辑项目</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="editPid">
                    <div class="mb-3">
                        <label for="editCatalog" class="form-label">运行目录</label>
                        <textarea class="form-control" id="editCatalog" rows="3" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="editScript" class="form-label">脚本命令</label>
                        <textarea class="form-control" id="editScript" rows="3" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="editDescription" class="form-label">项目描述</label>
                        <textarea class="form-control" id="editDescription" rows="3" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveEditButton">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="outputModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
     aria-labelledby="outputModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="outputModalLabel">运行输出</h5>
            </div>
            <div class="modal-body">
                <pre id="outputContent" class="output-content"></pre>
                <div class="text-center" id="outputLoading">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">运行中...</span>
                    </div>
                    <p class="mt-2">正在执行，请稍候...</p>
                </div>
            </div>
            <div class="modal-footer" id="outputModalFooter">
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteConfirmModalLabel">确认删除项目</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <p>即将删除项目: <strong><span id="deleteProjectName"></span></strong></p>
                <p>描述: <span id="deleteProjectDescription"></span></p>
                <p><strong class="text-danger">确定要删除该项目吗？此操作不可恢复。</strong></p>
                <input type="hidden" id="deleteProjectId"> </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteButton">删除</button>
            </div>
        </div>
    </div>
</div>

<!-- 自启确认模态框 -->
<div class="modal fade" id="autostartConfirmModal" tabindex="-1" aria-labelledby="autostartConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="autostartConfirmModalLabel">确认操作</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <i id="autostartConfirmIcon" class="bi fs-1 mb-2"></i>
                </div>
                <p class="text-center">
                    <span id="autostartConfirmAction"></span>项目:
                    <strong><span id="autostartProjectName"></span></strong>
                </p>
                <p class="text-center text-muted">
                    描述: <span id="autostartProjectDescription"></span>
                </p>
                <div class="alert alert-info" role="alert">
                    <i class="bi bi-info-circle me-2"></i>
                    <span id="autostartConfirmNote"></span>
                </div>
                <input type="hidden" id="autostartProjectId">
                <input type="hidden" id="autostartNewValue">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn" id="confirmAutostartButton">确认</button>
            </div>
        </div>
    </div>
</div>

<script src="/resource/js/bootstrap.bundle.min.js"></script>
<script src="/resource/js/utils.js"></script>
<script src="/resource/js/api.js"></script>
<script src="/resource/js/ui.js"></script>
<script src="/resource/js/app.js"></script>
</body>
</html>
